import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {actionCreator} from "../store/index";

class UsualWebSite extends PureComponent {

    render() {

        return (

            <div style={webSiteStyle}>
                <div style={webTitleStyle}>
                    常用网站
                </div>
                <ul style={webUlStyle}>
                    {
                        this.props.webSiteList.map((item) => {
                            const textColorStyle = {
                                color: `${bgColors[parseInt(Math.random() * bgColors.length)]}`,
                            };

                            return (<li style={{...webLiStyle, ...textColorStyle}}
                                        key={item.get("id")}>{item.get("name")}</li>);
                        })
                    }
                </ul>
            </div>
        );
    }

    componentDidMount() {
        if (this.props.webSiteList.size === 0) {
            this.props.getUsualWebData();
        }
    }

}

const mapState = (state) => {
    return {
        webSiteList: state.getIn(['bodyReducer', 'webSiteList'])
    };
};

const dispatchMapState = (dispatch) => {
    return {
        getUsualWebData() {
            const action = actionCreator.getWebSiteData();
            dispatch(action);
        },

    };
};

export default connect(mapState, dispatchMapState)(UsualWebSite);


const bgColors = ["green", "red", "pink", "purple", "orange", "darkblue"];

const webSiteStyle = {
    width: "100%",
    marginTop: 30,
    backgroundColor: "white",
    boxShadow: "2px 2px 2px #ccc",
    borderRadius:4,
};

const webTitleStyle = {
    width: "100%",
    height: 42,
    lineHeight: "42px",
    borderBottom: "solid 2px #8db5d0",
    paddingLeft: 10,
    color: "#333",
    fontSize: 16,
    boxSizing: "border-box",
};

const webUlStyle = {
    width: "100%",
    overflow: "hidden",
    marginLeft: 16,
    paddingBottom: 20,
};

const webLiStyle = {
    display: "block",
    height: 25,
    lineHeight: "25px",
    textAlign: "center",
    fontSize: 14,
    float: "left",
    marginTop: 20,
    marginRight: 20,
    cursor: "pointer",
};
